<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{dialogTitle}}
      <div class="my-define-dialog-title-btn">
        <i @click="triggerComment" class="saas-iconfont saas-icon-xiaoxi" v-bind:class="{'is-active':showComment}"></i>
        <i @click="submitForm" class="saas-iconfont saas-icon-baocun1"></i>
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle">
      <el-row class="my-dialog-top-row">
        <el-col :span="rowCol">
          <el-form size="medium" ref="myForm" :model="formData" :label-width="labelForm.labelWidth"
            :label-position="labelForm.labelPosition">
            <el-row>
              <el-col :span="24">
                <el-form-item label="标题" :prop="'NotifyTitle'" :rules="{
                      required: true, message: '请输入', trigger: 'change'}">
                  <el-input v-model="formData.NotifyTitle" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="简介" :prop="'NotifySummary'" :rules="{
                      required: true, message: '请输入', trigger: 'change'}">
                  <el-input type="textarea" :rows="5" v-model="formData.NotifySummary" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="主体" :prop="'NotifyContent'" :rules="{
                      required: true, message: '请输入', trigger: 'change'}">
                  <quill-editor ref="formContent" v-model="formData.NotifyContent" class="myQuillEditor"
                    :options="editorOption" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="有效期">
                  <el-date-picker style="width: calc(50% - 7px);" value-format="yyyy-MM-dd" v-model="formData.StartTime"
                    type="date" placeholder="请选择">
                  </el-date-picker>
                  -
                  <el-date-picker style="width: calc(50% - 6px);" value-format="yyyy-MM-dd" v-model="formData.EndTime"
                    type="date" placeholder="请选择">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="12" v-if="showComment">
          <div class="my-dontai-title">动态</div>
          <el-empty>
            <span slot="description">
              当前没有动态
            </span>
          </el-empty>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'
  import {
    getNotify,
    saveNotify
  } from '@/api/system/notify'
  import defaultSettings from '@/settings'
  import {
    quillEditor
  } from 'vue-quill-editor'
  import {
    Quill
  } from "vue-quill-editor";
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {
    eeSourceBtn
  } from '@/utils/quill.eeSourceBtn.js'
  // 注册我们写的事件
  Quill.register('modules/eeSourceBtn', eeSourceBtn)
  export default {
    name: 'notify-edit',
    components: {
      quillEditor,
      eeSourceBtn
    },
    props: {
      Id: {
        type: Number,
        default: 0
      },
      dialogTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        labelForm: defaultSettings.labelForm,
        fieldData: [],
        formData: {
          Id: 0,
          NotifyTitle: '',
          NotifySummary: '',
          NotifyContent: '',
          timeRange: '',
          StartTime: '',
          EndTime: '',
          IsTopShow: false
        },
        showComment: true,
        rowCol: 12,
        editorOption: {
          placeholder: "请在这里输入",
          modules: {
            eeSourceBtn: eeSourceBtn, // 引入我我们新增的事件
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], //引用，代码块
                [{
                  'header': 1
                }, {
                  'header': 2
                }], // 标题，键值对的形式；1、2表示字体大小
                [{
                  'list': 'ordered'
                }, {
                  'list': 'bullet'
                }], //列表
                [{
                  'script': 'sub'
                }, {
                  'script': 'super'
                }], // 上下标
                [{
                  'indent': '-1'
                }, {
                  'indent': '+1'
                }], // 缩进
                [{
                  'direction': 'rtl'
                }], // 文本方向
                [{
                  'size': ['small', false, 'large', 'huge']
                }], // 字体大小
                [{
                  'header': [1, 2, 3, 4, 5, 6, false]
                }], //几级标题
                [{
                  'color': []
                }, {
                  'background': []
                }], // 字体颜色，字体背景颜色
                [{
                  'font': []
                }], //字体
                [{
                  'align': []
                }], //对齐方式
                ['clean'], //清除字体样式
                ['image'] //上传图片、上传视频  'video'
              ]
            }
          }
        }
      }
    },
    created() {
      if (this.Id == 0) {
        this.triggerComment()
      }
      this.getData()
    },
    methods: {
      /** 查询Form数据 */
      getData() {
        getNotify({
          Id: this.Id
        }).then(res => {
          if (res.status) {
            var model = res.outputData.model;
            this.formData = res.outputData.model;
          }
        })
      },
      submitForm() {
        var that = this;
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            saveNotify(this.formData).then(res => {
              if (res.status) {
                this.$message({
                  message: this.formData.Id > 0 ? '修改成功' : '新增成功',
                  type: 'success'
                })
                this.cancel(true);
              }
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", {
          reload: reload
        })
      },
      triggerComment() {
        this.showComment = !this.showComment
        if (this.showComment) {
          this.rowCol = 12
        } else {
          this.rowCol = 24
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .my-dontai-title {
    font-size: 14px;
    line-height: 40px;
    border-bottom: solid 0.5px #d1d1d1;
    padding-left: 16px;
    color: #262626;
    font-weight: 700;
	border-image: linear-gradient( to bottom,transparent  50%,#ddd 50%) 0 0 100% 0 ;
  }
</style>
